
import { useLocation, useNavigate } from "react-router-dom"
import lessModule from "./index.module.less"
import { useEffect, useState } from "react"
import { Divider } from "antd"
// 主页-头部菜单组件-tab组件
const HomePage_HeaderMenuComponent_TabComponent: React.FC = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const [tabTitle, setTabTitle] = useState<string>("")

    const tabList = [
        {
            title: "全景监控",
            router: "panoramicMonitoring"
        },
        {
            title: "实时动态",
            router: "realRimeDynamics"
        },
        {
            title: "事件预警",
            router: "eventWarning",
        },
        {
            title: "统计查询",
            router: "statisticalQuery"
        },
        // {
        //     title: "调试测试",
        //     router: "debuggingAndTesting"
        // },
        {
            title: "数据维护",
            router: "dataMaintenance"
        },
        {
            title: "系统设置",
            router: "systemSettings"
        },
    ]


    const click_tabItem = (data: object) => {
        tabTitle !== data['title'] && navigate(data["router"])
    }

    useEffect(() => {
        setTabTitle(tabList.filter((item) => item["router"] === location.pathname.split("/")[2])[0]?.["title"])
    }, [location])
    return (
        <div className={lessModule["homePageHeaderMenuComponentTabComponent"]}>
            {
                tabList.map((item, idx) => {
                    return (
                        <div key={`tabItem${idx}`} className={lessModule["homePageHeaderMenuComponentTabComponent-tabItem"]}>
                            <span className={lessModule["homePageHeaderMenuComponentTabComponent-tabItem__title"]}
                                style={{
                                    cursor: tabTitle === item['title'] ? "default" : "pointer",
                                    color: tabTitle === item['title'] ? "rgba(255, 255, 255, 0.9)" : "rgba(255, 255, 255, 0.55)"
                                }}
                                onClick={() => click_tabItem(item)}>{item["title"]}</span>
                            {
                                tabTitle === item['title'] && <div className={lessModule["homePageHeaderMenuComponentTabComponent-tabItem__rect"]} ></div>
                            }
                        </div>
                    )
                })
            }
        </div>
    )
}



export default HomePage_HeaderMenuComponent_TabComponent